<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>实现底部导航栏</title>
  <link rel="stylesheet" href="css/nav.css">
</head>

<body>
  
  <div id="app">
    <div class="content">
      <h1>主页内容</h1>
    </div>
      <list></list>
      <!-- TODO 根据HTML结构分析，定义子组件结构
      <div class="navbar-item"><img src="images/nav-icon-home.png" alt="首页"> <span>首页</span></div>
      <div class="navbar-item"><img src="images/nav-icon-category.png" alt="商品分类"> <span>商品分类</span></div>
      <div class="navbar-item"><img src="images/nav-icon-cart.png" alt="购物车"> <span>购物车</span></div>
      <div class="navbar-item"><img src="images/nav-icon-user.png" alt="个人中心"> <span>个人中心</span></div> -->
  </div>

  <template id="parent">
    <div class="bottom-navbar">
      <my-parent v-for="(item, index) in navTabs" :icon="item.icon" :title="item.title" :key="index"></my-parent>
    </div>
  </template>

  <template id="child">
      <my-child class="navbar-item"><img :src="icon" :alt="title"><span>{{title}}</span></my-child>
  </template>
  
  <!-- 引入 Vue.js -->
  <script src="js/vue.js"></script>
  <script>
    const newChild = {
      template:"#child",
      props:["title","icon"]
    }

    const newParent = {
      template:"#parent",
      components:{
        "my-parent":newChild,
        },
        data() {
          return {
              navTabs: [
              { title: '首页', icon: 'images/nav-icon-home.png' },
              { title: '商品分类', icon: 'images/nav-icon-category.png' },
              { title: '购物车', icon: 'images/nav-icon-cart.png'},
              { title: '个人中心', icon: 'images/nav-icon-user.png'}
            ]
          }
      }
    }

    new Vue({
      el:"#app",
      components:{
        "list":newParent
      }
    })

        // TODO 参考子组件导航项数据如下
        // navTabs: [
        //   { title: '首页', icon: 'images/nav-icon-home.png' },
        //   { title: '商品分类', icon: 'images/nav-icon-category.png' },
        //   { title: '购物车', icon: 'images/nav-icon-cart.png'},
        //   { title: '个人中心', icon: 'images/nav-icon-user.png'}
        // ]
     
  </script>

</body>

</html>